<template>
    <div class="game-list">
        <div class="game-item">
            <div v-if="!isSearch" class="slider">
                <el-image :src="data.fenlei_data.fenlei_img"></el-image>
                <div class="game-name">{{data.fenlei_data.fenlei_mingcheng}}</div>
                <div class="types">
                    <div v-for="item in types" :key="item.key" :class="{active:active === item.key}"
                         @click="selectType(item.key)">{{item.name}}
                    </div>
                </div>
            </div>
            <div class="pro" :class="{list:list && list.length>0,index:!list}">
                <template v-if="list && list.length>0">
                    <div class="pro-item" v-for="item in list"
                         @click="$router.push({name:'productDetail',query:{id:item.Id}})">
                        <el-card :body-style="{ padding: '0px' }">
                            <el-image fit="fill" :src="item.shangping_tupian"
                                      :lazy="true"
                                      class="image b-b">
                                <div slot="placeholder" class="placeholder">
                                    <i class="el-icon-loading"></i>
                                </div>
                            </el-image>
                            <div style="padding: 5px;">


                                <div class="bottom clearfix">
                                    <el-link type="primary">
                                        <div class="bottom">
                                            {{item.shangping_mingcheng}}
                                        </div>
                                    </el-link>
                                </div>
                                <div class="top m-t">
                                <span class="text-md text-danger font-bold">{{(item.shangping_danjia /100 ).toFixed(2)}}
                                </span>
                                    <template v-if="item.shangping_xiaoliang_xingji">
                                        <el-rate
                                                v-model="item.shangping_xiaoliang_xingji"
                                                disabled
                                                text-color="#ff9900">
                                        </el-rate>
                                    </template>
                                    <template v-else>
                                        <i class="iconfont icon-xin  text-danger"></i>
                                    </template>

                                </div>
                            </div>
                        </el-card>
                    </div>
                </template>
                <template v-if="prods && prods.length>0">
                    <div class="pro-item" v-for="item in prods"
                         @click="$router.push({name:'productDetail',query:{id:item.Id}})">
                        <el-card :body-style="{ padding: '0px' }">
                            <el-image fit="fill" :src="item.shangping_tupian"
                                      :lazy="true"
                                      class="image b-b">
                                <div slot="placeholder" class="placeholder">
                                    <i class="el-icon-loading"></i>
                                </div>
                            </el-image>
                            <div style="padding: 5px;">


                                <div class=" clearfix">
                                    <el-link type="primary">
                                        <div class="bottom">
                                            {{item.shangping_mingcheng}}
                                        </div>
                                    </el-link>
                                </div>
                                <div class="top m-t">
                                <span class="text-md text-danger font-bold">{{(item.shangping_danjia /100 ).toFixed(2)}}
                                </span>
                                    <template v-if="item.shangping_xiaoliang_xingji">
                                        <el-rate
                                                v-model="item.shangping_xiaoliang_xingji"
                                                disabled
                                                text-color="#ff9900">
                                        </el-rate>
                                    </template>
                                    <template v-else>
                                        <i class="iconfont icon-xin  text-danger"></i>
                                    </template>


                                </div>
                            </div>
                        </el-card>
                    </div>
                </template>


            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: 'gameList',
        components: {},
        props: ['isSearch', 'data', 'list'],
        data() {
            return {
                currentDate: '2017-12-15',
                value: 3,
                types: [
                    {name: '最新出售', key: 'shop_zuixin_chushou'},
                    {name: '热门商品', key: 'shop_remen_shop'},
                    {name: '推荐商品', key: 'shop_tuijian_shop'},
                ],
                active: 'shop_zuixin_chushou',
                prods: []
            }
        },
        computed: {},
        methods: {
            selectType(key) {
                this.active = key;
                this.prods = this.data[key]
            }
        },
        created() {
            if (this.data) {
                this.prods = this.data['shop_zuixin_chushou']
            }


        },
    }
</script>

<style lang="less" scoped>
    @import '~@/assets/css/varibles.less';

    .game-list {
        width: @main-width;
        margin: 0 auto;

        .game-item {
            display: flex;
            margin-right: -15px; //这里只给margin-right -15 因为下方只给了pro-item 右边-15
            margin-bottom: 20px;
            cursor: pointer;

            //左侧选项
            .slider {
                background-color: @primary-color;
                user-select: none;
                color: white;
                border-top-left-radius: 15px;
                border-bottom-left-radius: 15px;
                margin-right: 10px;

                .game-name {
                    font-size: 15px;
                    font-weight: bold;
                    margin: 15px auto;
                    text-align: center;
                }

                /deep/ .el-image {
                    width: 68px;
                    display: block;
                    margin: 20px auto 0 auto;
                    border-radius: 5px;

                    .el-image__error, .el-image__placeholder {
                        background-color: transparent;
                    }
                }

                .types {
                    div {
                        box-sizing: border-box;
                        width: 120px;
                        padding: 15px 0;
                        padding-left: 30px;

                        &:hover, &.active {
                            background-color: #77b6f5;
                            border-left: 5px solid #add3f9;
                            transition: all .3s;
                        }
                    }
                }
            }

            .pro {
                display: flex;
                width: 100%;
                justify-content: flex-start;

                .pro-item {
                    flex: 0 1 25%;
                    padding: 15px 15px 0 0;
                    box-sizing: border-box;

                    &:hover {
                        /deep/ .el-image__inner {
                            transform: scale(1.1);
                        }
                    }

                    /deep/ .el-image {
                        min-height: 210px;
                        width: 100%;
                        display: flex;
                        align-items: center;

                        img {
                            object-fit: cover;
                            height: 211px;
                            transition: all 1s;
                        }

                        .placeholder {
                            margin: 0 auto;
                        }

                        .el-image__error, .el-image__placeholder {
                            background-color: transparent;
                        }
                    }

                    .bottom {
                        height: 40px;
                        display: inline-block;
                        text-overflow: -o-ellipsis-lastline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;

                        span {
                            display: inline-block;

                        }

                    }

                    .top {
                        display: flex;
                        justify-content: space-between;
                    }
                }

                //搜索页列表样式
                &.list {
                    flex-wrap: wrap; //换行
                }

                //首页列表样式
                &.index {
                    .pro-item {
                        padding: 0 5px;
                    }
                }


            }
        }
    }
</style>
